<template>
  <view>
    <image class="imgBanner" mode="aspectFill" src="https://gd-hbimg.huaban.com/e0c0a007e1307d22e9373124c84cb77b8231648b2bb6f-vd50Yr_fw658webp"></image>
    <view class="vip-lay">
      <view @click="type=1" :class="[type===2 ? 'vip-item':'vip-item-check']">
        <view class="title">普通会员</view>
        <view class="price">免费</view>
      </view>
      <view @click="type=2" :class="[type===2 ? 'vip-item-check' : 'vip-item']">
        <view class="title">VIP会员</view>
        <view class="price">{{setting.vip_price}}/年</view>
      </view>
    </view>
    <view class="table">
      <uni-table border stripe >
        <!-- 表头行 -->
        <uni-tr>
          <uni-th align="center" width="100rpx">
            <view class="table-item-black">服务</view>
          </uni-th>
          <uni-th align="center" width="100rpx">
            <view :class="[type===2 ? 'table-item-black' : 'table-item-check']">普通会员</view>
          </uni-th>
          <uni-th align="center" width="100rpx">
            <view :class="[type===2 ? 'table-item-check' : 'table-item-black']">VIP会员</view>
          </uni-th>
        </uni-tr>
        <uni-tr v-for="(item,index) in tableData" :key="index">
          <uni-td align="center">
            <view class="table-item-black">{{item.name}}</view>
          </uni-td>
          <uni-td align="center">
            <view :class="[type===2 ? 'table-item-black' : 'table-item-check']">{{item.usually}}</view>
          </uni-td>
          <uni-td align="center">
            <view :class="[type===2 ? 'table-item-check' : 'table-item-black']">{{item.vip}}</view>
          </uni-td>
        </uni-tr>
      </uni-table>
    </view>
    <view class="server">
      <view class="title">服务专区</view>
      <view class="item">
        <view class="left">专属客服: {{ common.appConfig.tel_phone }}</view>
        <uni-icons type="phone-filled" size="20" @click="$wanlshop.phone(common.appConfig.tel_phone)"></uni-icons>
      </view>
      <view class="item">
        <view class="left">平台客服: {{ common.appConfig.platform_phone }}</view>
        <uni-icons type="phone-filled" size="20"  @click="$wanlshop.phone(common.appConfig.platform_phone)"></uni-icons>
      </view>
      <view class="item">
        <view class="left">客服微信: {{ common.appConfig.platform_wechat }}</view>
        <view class="btn"  @click="$wanlshop.copy(common.appConfig.platform_wechat)">点击复制</view>
      </view>
    </view>
    <view style="height: 200rpx"></view>
    <view class="bottom-fixed" @click="openDialog()">
      <view class="btn">联系客服</view>
    </view>


    <!-- 普通弹窗 -->
    <uni-popup ref="popup" background-color="#fff">
      <view class="server">
        <view class="item">
          <view class="left">专属客服: {{ common.appConfig.tel_phone }}</view>
          <uni-icons type="phone-filled" size="20" @click="$wanlshop.phone(common.appConfig.tel_phone)"></uni-icons>
        </view>
        <view class="item">
          <view class="left">平台客服: {{ common.appConfig.platform_phone }}</view>
          <uni-icons type="phone-filled" size="20"  @click="$wanlshop.phone(common.appConfig.platform_phone)"></uni-icons>
        </view>
        <view class="item">
          <view class="left">客服微信: {{ common.appConfig.platform_wechat }}</view>
          <view class="btn"  @click="$wanlshop.copy(common.appConfig.platform_wechat)">点击复制</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState(['user', 'statistics','common'])
  },
  data() {
    return {
      type:1,
      setting:{},
      tableData:[
        { name:"产品排名" , usually:"后面", vip:"前面"},
        { name:"产品数量" , usually:"20个", vip:"100个"},
        { name:"列表产品推荐" , usually:"10个", vip:"20个"},
        { name:"查看代理信息" , usually:"X", vip:"20条/天"},
        { name:"首页广告位" , usually:"X", vip:"买广告送会员"}
      ]
    };
  },
  onLoad() {
    this.getVipInfo()
  },
  methods: {
    getVipInfo(){
      const _that = this
      this.$api.get({
        url: '/wanlshop/common/setting',
        success: res => {
          _that.setting = res.setting
          _that.tableData[1].usually =  `${_that.setting.general_product_num}个`
          _that.tableData[1].vip =  `${_that.setting.vip_product_num}个`
          _that.tableData[2].usually =  `${_that.setting.general_recommend_num}个`
          _that.tableData[2].vip =  `${_that.setting.vip_recommend_num}个`
          _that.tableData[3].usually =  `${_that.setting.general_see_num}条/天`
          _that.tableData[3].vip =  `${_that.setting.vip_see_num}条/天`
        },
        fail: error => {
          console.log(error)
        }
      });
    },
    openDialog() {
      this.$refs.popup.open();
    }
  },
}
</script>

<style lang="scss">
.imgBanner{
  width: 700rpx;
  margin: 30rpx 25rpx 30rpx 25rpx;
  height: 300rpx;
  border-radius: 20rpx;
}
.vip-lay{
  display: flex;
  justify-content: space-around;

}
.vip-lay .vip-item-check{
  width: 320rpx;
  border-radius: 20rpx;
  height: 170rpx;
  border: 2rpx solid #FAC03D;
  background: #faecd8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.vip-lay .vip-item{
  width: 320rpx;
  border-radius: 20rpx;
  height: 170rpx;
  border: 2rpx solid #DCDFE6;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.vip-lay .title{
  color: black;
  font-size: 36rpx;
  font-weight: bold;
}
.vip-lay .price{
  color: #FAC03D;
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 20rpx;
}
.table{
  padding: 20rpx;
}
.table-item-black{
  color: black;
  font-size: 26rpx;
  width: 200rpx;
}
.table-item-check{
  color: #FAC03D;
  font-size: 26rpx;
  width: 200rpx;
}
.server{
  background: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 22rpx;
  border-radius: 15rpx;
  padding: 22rpx;
}
.server .title{
  color: black;
  font-weight: bold;
  font-size: 32rpx;
  height: 80rpx;
  line-height: 80rpx;
}
.server .item{
  height: 80rpx;
  display: flex;
  align-items: center;
}
.server .item .left{
  color: black;
  font-size: 30rpx;
  width: 400rpx;
}
.server .item .btn{
  color: white;
  background: #FAC03D;
  border-radius: 10rpx;
  padding: 5rpx 15rpx;
}
.bottom-fixed{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20rpx;
}
.bottom-fixed .btn{
  width: 700rpx;
  height: 80rpx;
  margin: auto;
  color: white;
  background: #FAC03D;
  border-radius: 20rpx;
  text-align: center;
  line-height: 80rpx;
  font-weight: bold;
}
</style>
